<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:include="base/include/head"></head>
<body>
		<div id="tb" style="padding:5px;height:auto">
			角色名称：<input id="roleName" class="easyui-textbox" style="height: 21px;width:180px" value="" />
			<a href="#" class="easyui-linkbutton" iconCls="icon-search" onclick="menuPage()"> 搜索 </a>
			<a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="openDilog()">新增</a> 
			<a href="#" class="easyui-linkbutton" iconCls="icon-help"   onclick="downloadExcel()">操作指南</a>
		</div>
	<table id="tt"></table>
	
<div id="cc" class="easyui-layout" style="width:100%;height:400px;">   
    <div data-options="region:'west',title:'持有权限',split:true,tools:'#tools'" style="width:200px;">
    	<ul id="tree"></ul>
    </div>   
    <div data-options="region:'center',title:'持有资源'" style="padding:5px;background:#eee;">
    	<table id="resource"></table>
    </div>   
</div> 
<div id="tools">
	<a href="javascript:savePowerMenus()" class="icon-save" ></a>
</div>
	
	<!--dialog-->
	<div id="dd"></div> 

	<!--角色 menu菜单项 -->
	<div id="mm" class="easyui-menu" style="width: 120px;">
		<div data-options="iconCls:'icon-edit',name:'update'">修改</div>
		<div data-options="iconCls:'icon-remove',name:'remove'" >移除</div>
		<div data-options="iconCls:'icon-reload',name:'status'" >变更状态</div>
	</div>
	<!--资源权限菜单项 -->
	<div id="mm_resource" class="easyui-menu" style="width: 120px;">
		<div data-options="iconCls:'icon-reload',name:'status'" >变更状态</div>
	</div>
	
</body>
<script type="text/javascript">
/*<![CDATA[*/
$(function(){
	menuPage();
	resoucePage();
	$("#cc").layout('resize',{   
        height:($(window).height()/2)   
    })
});
//新增或更改角色信息
function openDilog(id){
	$('#dd').dialog({    
	    title: '角色新增或更改',  
	    queryParams : {
	    	id : id
		},
	    width: 400,    
	    height: 200,    
	    closed: false,    
	    cache: false,    
	    href: '../role/createOrUpdateRolePage',    
	    modal: true   
	});
}

// 保存更新菜单信息
function saveOrUpdateRole(url){
	 $.ajax({
		   type:"POST",
		   url:url,
		   data:$('#formBox').serialize(),
		   dataType : "json",
		   async: false,
		   success:function(data){
			   if(data.status){
				   $('#tt').datagrid('reload');
				   $('#dd').dialog('close');
				   $.messager.alert('通知','完成！');
			   }else{
				   $.messager.alert('校验',data.msg[0].defaultMessage);
			   }
		   },
		   error : function(e) {
			   alert("确认失败！");
			}
		  });
}

function menuPage(){
	var roleName = $('#roleName').textbox('getValue');
	// 查询页面信息 提交信息
	$('#tt').datagrid(
				{
					title : '角色查询页面',
					toolbar : '#tb',
					url : '../role/queryRole',
					method : 'POST',
					queryParams : {
						roleName : roleName
					},
					striped : true,
					fitColumns : false,
					singleSelect : true,
					rownumbers : true,
					pagination : true,
					nowrap : true,
					striped:true,
				    remoteSort: true,
				    multiSort: true,
					pageSize : 10,
					pageList : [10, 20, 50, 100, 150, 200],
					showFooter : true,
					checkOnSelect :false,
					fitColumns : true,
					onRowContextMenu: function(e, rowIndex, rowData){
						e.preventDefault();
						// 显示快捷菜单
						$('#mm').menu('show', {
							left: e.pageX,
							top: e.pageY,
							onClick: function(item){
								if(item.name == 'remove'){
									$.messager.confirm('确认', '您确定要删除角色信息吗？', function(r){
										if (r){
											$.ajax({
												type : "POST",
												url : '../role/deleteRole',
												data : {
													id : rowData.id
												},
												dataType : "json",
												async : false,
												success : function(data) {
													$('#tt').datagrid('reload');
												},
												error : function(e) {
													alert("确认失败！");
												}
											});
										}
									});
								}else if(item.name == 'update'){  
									openDilog(rowData.id);
								}else if(item.name == 'status'){
									$.messager.confirm('确认', '确定变更状态吗？', function(r){
										if (r){
											$.ajax({
												type : "POST",
												url : '../role/updateRoleStatus',
												data : {
													id : rowData.id
												},
												dataType : "json",
												async : false,
												success : function(data) {
													$('#tt').datagrid('reload');
												},
												error : function(e) {
													alert("确认失败！");
												}
											});
										}
									});
								}
							}
						});
					},
					columns : [ [
							/* {field : 'ck', checkbox : true }, */
							{field : 'roleName',title : '名称',	width : 200,sortable:true,align : 'center'},
							{field : 'roleDesc',title : '描述',	width : 300,sortable:true,align : 'center'},
							/* {field : 'xxx',title : '公司',	width : 300,align : 'center',formatter :function(value,row,index){
								return row.company.companyName;
							}}, */
							{field : 'powerType',title : '权限类型',	width : 80,align : 'center',formatter : function(value, row,index) {
								if(row.powerType == "user"){
									return "[ 用户 ]";
								}else if(row.powerType == "default_user"){
									return "<span style='color:#EAC100;'>[ 默认用户权限 ]</span>";
								}else if(row.powerType == "default_sp"){
									return "<span style='color:green;'>[ 默认供应商权限 ]</span>";
								}
							}},/* 
							{field : 'deleted',title : '是否删除',	width : 80,align : 'center',formatter : function(value, row,index) {
								if(row.deleted == 1){
									return "[删除]";
								}else if(row.deleted == 0){
									return "exist";
								}
							}}, */
							{field : 'status',title : '状态',	width : 50,align : 'center',formatter : function(value, row,index) {
								if(row.status == 1){
									return "[生效]";
								}else if(row.status == 0){
									return "失效";
								}else{
									return "异常";
								}
							}}
							] ],
					onClickRow: function(rowIndex, rowData){
						loadMenus(rowData.id);
					}  
				}).datagrid('resize',{   
			        height:($(window).height()/2-20)   
			    }); 
	}	

function resoucePage(id,name){
	var url = '../role/queryResourceByFidAndRoleId';
	var roleId ='';
	if($('#tt').datagrid('getSelected')){
		roleId= $('#tt').datagrid('getSelected').id;
	}
	// 查询页面信息 提交信息
	$('#resource').datagrid(
				{
					title : '[菜单名称]--'+name,
					/* toolbar : '#tb', */
					url : url,
					method : 'POST',
					queryParams : {
						fid : id,
						roleId : roleId
					},
					striped : true,
					fitColumns : false,
					singleSelect : true,
					rownumbers : true,
					pagination : true,
					nowrap : true,
					striped:true,
				    remoteSort: true,
				    multiSort: true,
					pageSize : 10,
					pageList : [10, 20, 50, 100, 150, 200],
					showFooter : true,
					checkOnSelect :false,
					onRowContextMenu: function(e, rowIndex, rowData){
						e.preventDefault();
						// 显示快捷菜单
						$('#mm_resource').menu('show', {
							left: e.pageX,
							top: e.pageY,
							onClick: function(item){
								if(item.name == 'status'){
									var row = $('#tt').datagrid('getSelected');
									if(!row){
										$.messager.alert("错误","请选择角色信息！");
										return;
									}
									$.messager.confirm('确认', '确定变更资源['+rowData.resName+']使用状态吗？', function(r){
										if (r){
											$.ajax({
												type : "POST",
												url : '../role/updateResourceStatus',
												data : {
													resId : rowData.id ,
													roleId : row.id
												},
												dataType : "json",
												async : false,
												success : function(data) {
													$('#resource').datagrid('reload');
												},
												error : function(e) {
													alert("确认失败！");
												}
											});
										}
									});
								}
							}
						});
					},
					columns : [ [
							/* {field : 'ck', checkbox : true }, */
							{field : 'resName',title : '资源名称',		width : 250,align : 'center'},
							{field : 'resDesc',title : '资源名称',		width : 250,align : 'center'},
							{field : 'resPermission',title : '资源权限码',	width : 150,align : 'center'},
							{field : 'resLink',title : '资源连接',	width : 150,align : 'center'},
							{field : 'status',title : '是否启用',	width : 250,align : 'center',formatter : function(value, row,index) {
								if(row.status == 1){
									return "[生效]";
								}else if(row.status == 0){
									return "失效";
								}else{
									return "异常";
								}
							}}
							] ]
				}); 
	}


// 加载 tree 页 权限树
function loadMenus(id){
	$('#tree').tree({
		url:'../menu/queryMenusTree?roleId='+id,
		cascadeCheck :true,
		checkbox : true,
		onlyLeafCheck: false,
		lines:true,
		onClick:function(node){
			resoucePage(node.id,node.text);
		}
	}); 
}


function savePowerMenus(){
	var row = $('#tt').datagrid('getSelected').id;
	var url = '../role/addRoleMenus';
	if(row){
		$.ajax({
			   type:"POST",
			   url:url,
			   data:{
				   navIds : getTree(),
				   roleId : row
			   },
			   dataType : "json",
			   async: false,
			   success:function(data){
				   $.messager.alert('通知','保存完成！');
			   },
			   error : function(e) {
				   $.messager.alert('警告','异常！');
				}
		});
	}else{
		$.messager.alert('警告','请选择权限！');
	}
	
}


function getTree(){
	var nodes = $('#tree').tree('getRoots');
	var str = "";
	for(var i in nodes){
		str +=a(nodes[i]);
	}
	return str;
}

function a(node){
	var str = "";
	var nodes = $('#tree').tree('getChildren',node.target);
	if(nodes!=null && nodes.length>0){
		var flag =false;
		for(var i in nodes){
			if(nodes[i].checked){
				flag = true;
				str +=nodes[i].id+",";
			}
		}
		if(flag){
			str +=node.id+",";
		}
	}
	return str;

}
/*]]>*/
</script>
</html>